import React from 'react';
import { Button, Form, Input, Radio, MenuProps, Dropdown, Space, Table, Select } from 'antd';
import { DownOutlined, RedoOutlined, SnippetsFilled } from '@ant-design/icons';
import '../sass/input.scss'
const Inputs = () => {
    const dataSource = [
        {
            key: '1',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '已下单'
        },
        {
            key: '2',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '未下单'
        },
        {
            key: '3',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '已下单'
        },
        {
            key: '4',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '已下单'
        },
        {
            key: '5',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '已下单'
        },

        {
            key: '6',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '未下单'
        },
        {
            key: '7',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '未下单'
        },
        {
            key: '8',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '已下单'
        },

        {
            key: '9',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '未下单'
        },
        {
            key: '10',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '已下单'
        },
        {
            key: '11',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '已下单'
        },

        {
            key: '12',
            time: '2019-06-18 17:43:40',
            name: '奥利给，干他',
            itmes: '00:07:32',
            yeshu: '4',
            tiao: '32.82%',
            bing: '已下单'
        },

    ];

    const columns = [
        {
            title: '',
            render: (a: any, b: any, c: any) => c + 1,
        },
        {
            title: '访问时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '用户昵称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '访问时长',
            dataIndex: 'itmes',
            key: 'itmes',
        },
        {
            title: '访问页数',
            dataIndex: 'yeshu',
            key: 'yeshu',
        },
        {
            title: '跳出率',
            dataIndex: 'tiao',
            key: 'tiao',
        },
        {
            title: '下单状态',
            dataIndex: 'bing',
            key: 'bing',
        },
    ];

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    return (
        <div>

            <div id='put'>
                <div id='puts'>
                    <div id='put2'>
                        <Form>
                            <Form.Item label="用户昵称">
                                <Input placeholder=" " />
                            </Form.Item>
                        </Form>
                    </div>
                    <div id='put1'>
                        下单状态：
                        <Select
                            defaultValue="全部"
                            style={{ width: 200 }}
                            onChange={handleChange}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '已处理', label: '已处理' },
                                { value: '未处理', label: '未处理' },
                            ]}
                        />
                    </div>
                </div>
                <div id='but'>
                    <Button value="large" type="primary" > <SnippetsFilled />查询</Button>
                    <Button value="large"><RedoOutlined />重置</Button>
                </div>
            </div>
            <div id='tablea'>
                <Table dataSource={dataSource} columns={columns} />;
            </div>
        </div>
    );
};

export default Inputs;